/* eslint-disable no-param-reassign */
import React, { useRef, useEffect } from 'react';
// import { findDOMNode } from 'react-dom';
import { Box, Button, Card, Form, Input, NumberPicker, Field } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import styles from './index.module.scss';
import ExtrProps from '../../DictItems/components/ExtraProps';
import { toJS } from 'mobx';
import { useStore } from '@/hooks';

const ItemData = observer(({ dict }) => {
  const { dictTreeStore: store } = useStore();
  const { selectedItem: item } = store;
  const field = Field.useField({
    values: toJS(item),
  });
  // console.log('0000000', toJS(item));
  const editing = !!item?.itemId;
  const containerRef = useRef(null);
  // const [pos, setPos] = useState({ left: 0, right: 0 });
  // useEffect(() => {
  //   // eslint-disable-next-line react/no-find-dom-node
  //   const dom = findDOMNode(containerRef.current);
  //   const rect = (dom && dom.getBoundingClientRect()) || {};
  //   setPos({ left: rect.left, right: document.documentElement.offsetWidth - rect.left - rect.width });
  // }, []);
  useEffect(() => {
    // console.log('0000000setValues', toJS(item));
    // 使用item设置表单内容
    initForm();
  }, [item]);

  const initForm = () => {
    field.reset();
    field.setValues(toJS(item));
  };

  const handleSubmit = async () => {
    const postData = field.getValues();
    // 设置tree的选中，以便触发tree修改当前节点的label
    store.setSelectedId('');
    store.update(postData).then(() => {
      // 触发tree更新节点显示
      store.setSelectedId(postData.itemId);
    });
  };

  return (
    <div className={styles.ClassifiedForm}>
      <Card ref={containerRef} free className={styles.Card}>
        <Card.Header title={`【${item?.name || dict.name || ''}】`} />
        <Card.Divider />
        <Card.BulletHeader title={i18n.t('基本信息')} />
        <Card.Content>
          <Form responsive fullWidth labelAlign="top" field={field}>
            <Form.Item colSpan={4} label="字典项标识">
              <Input name="itemId" placeholder="请输入字典项标识" readOnly />
            </Form.Item>
            <Form.Item colSpan={4} {...Form.ItemLayout} label={i18n.t('字典项名称')} required requiredMessage={i18n.t('必填')}>
              <Input name="name" placeholder={i18n.t('请输入字典项名称')} validate="" />
            </Form.Item>
            <Form.Item colSpan={4} {...Form.ItemLayout} label={i18n.t('排序值')} required requiredMessage={i18n.t('必填')}>
              <NumberPicker name="sortWeight" step={1} precision={3} />
            </Form.Item>
            <Form.Item colSpan={8} {...Form.ItemLayout} label={i18n.t('字典项说明')}>
              <Input name="description" placeholder={i18n.t('请输入字典项详细信息')} />
            </Form.Item>
          </Form>
          <Form.Item colSpan={12}>
            <Box spacing={8} direction="row" margin={[20, 0]}>
              {/* <Form.Submit type="primary" onClick={handleSubmit} validate>提交</Form.Submit> */}
              <Button type="primary" className={styles.Button} onClick={handleSubmit}>保存</Button>
              <Button className={styles.Button} onClick={() => initForm()}>取消</Button>
            </Box>
          </Form.Item>

        </Card.Content>

        <Card.BulletHeader title={i18n.t('扩展属性')} />
        <Card.Content>
          <ExtrProps item={item} store={store} />
        </Card.Content>
      </Card>
      {/* <Box
        direction="row"
        spacing={16}
        style={{ left: pos.left, right: pos.right }}
        align="center"
        justify="center"
        className={styles.fixedButtons}
      >
        <Form.Submit type="primary" field={field} onClick={handleSubmit} validate>提交</Form.Submit>
        <Button className={styles.Button} onClick={() => initForm()}>取消</Button>
      </Box> */}
    </div>
  );
});

export default ItemData;
